<template>
  <el-select
    v-model="host_group_value_swap"
    placeholder="请选择"
    @change="selectChange"
    style="width: 100%"
  >
    <el-option
      v-for="item in host_group_data"
      :key="item.id"
      :label="item.host_group_name"
      :value="item.id"
    >
      <span style="float: left; color: black">{{ item.host_group_name }}</span>
      <span style="position: absolute; right: 46px; font-size: 8px; color: blue"
        >编辑</span
      >
      <span style="position: absolute; right: 18px; font-size: 8px; color: blue"
        >查看</span
      >
    </el-option>
  </el-select>
</template>

<script>
import * as Request from "../../general/request";
import { ElMessage } from "element-plus";
import { onMounted, ref, watch } from "vue";
// import { inject } from "@vue/composition-api";

export default {
  name: "host_group",
  props: {
    host_group_id: Number,
    project_id: Number,
    editorOrCreateType: Number,
    groupId: Number,
  },

  setup(props, { emit }) {
    let host_group_data = ref([]);
    let host_group_value_swap = ref(null);
    // const groupId = inject("groupId");

    const selectChange = (val) => {
      get_host_groups();
      emit("childClick", val);
    };

    const changeSel = () => {
      get_host_groups();
    };

    watch(
      () => props.groupId,
      (newGroupId, oldGroupId) => {
        console.log(newGroupId, oldGroupId);
        get_host_groups();
        host_group_value_swap.value = newGroupId;
      }
    );

    const testEdit = () => {
      alert("edit test");
    };
    onMounted(() => {
      get_host_groups();
    });

    const get_host_groups = async () => {
      let response = null;
      if (props.editorOrCreateType === 1) {
        response = await Request.GET(
          "/background/home/flow_line/flow_host_group",
          { host_group_id: props.host_group_id }
        );
      } else {
        response = await Request.GET(
          "/background/home/flow_line/flow_host_group",
          { project_id: props.project_id }
        );
      }

      if (response && response.data) {
        let return_data = response.data;
        if (return_data.success) {
          host_group_data.value = return_data.data;
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    return {
      host_group_data,
      selectChange,
      props,
      get_host_groups,
      host_group_value_swap,
      testEdit,
      changeSel,
    };
  },
};
</script>

<style scoped></style>
